﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>todo</title>
<link rel="stylesheet" href="style/pub/common.css"/>
<link rel="stylesheet" href="style/undecorated/colResizer.css"/>
<link rel="stylesheet" href="style/undecorated/treeTable.css"/>
<link rel="stylesheet" href="style/undecorated/popupMenu.css"/>

<link rel="stylesheet" href="style/undecorated/dropdown.css"/>
<link rel="stylesheet" href="style/undecorated/timePicker.css"/>
<link rel="stylesheet" href="style/undecorated/datetimePicker.css"/>

<link rel="stylesheet" href="style/undecorated/progressBar.css"/>

<link rel="stylesheet" href="style/todo.css"/>

<style>
    #tblReminders * {
        /*font-family: 'segou ui';*/
        font-size: 11pt;
    }

    h1 {
        font-size: 16pt;
    }

    #tblReminders {
        border-collapse: collapse;
        border: solid 1px silver;
        width: 100%;
    }

    #tblReminders th {
        border-bottom: solid 1px silver;
    }

    #tblReminders th, #tblReminders td {
        /*border-bottom: solid 1px silver;*/
        /*border-right: solid 1px silver;*/
        padding: 5px;

    }

    #tblReminders td:nth-child(4) {
        padding-left: 6px;
        padding-right: 8px;
    }

    a.btnRemove {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url('image/undecorated/x-gray.gif') center center no-repeat;
        padding: 1px;
    }

    a.btnRemove:hover {
        background-image: url('image/undecorated/x-blue.gif');
    }

    #tbdEmptyIndicator td {
        font-style: italic;
    }

    #tbdReminders td input, #tbdReminders td select {
        width: 100%;
    }

    <!--
    -->
    .datetimeInput {
        background: url('image/undecorated/calendar-rpad-2.png') no-repeat right center;
        /*border: solid 1px silver;*/
        padding: 2px 1px;
        border: 1px #acaeb4 solid;
        /*border-top: 1px #acaeb4 solid;*/
        /*border-left: 1px #dde1e7 solid;*/
        /*border-right: 1px #dde1e7 solid;*/
        /*border-bottom: 2px #f1f4f7 solid;*/
        /*-moz-border-radius: 2px;*/
        /*-webkit-border-radius: 2px;*/
    }

    <!--
    -->
    #buttonPanel {
        margin-top: 12px;
        text-align: right;
    }

    #buttonPanel input {
        margin: 0 3px;
        width: 60px;
    }

</style>

<script src="script/lib/jquery.js"></script>
<script src="script/pub/jsex.js"></script>
<script src="script/pub/jqueryex.js"></script>
<script src="script/pub/domex.js"></script>

<script src="script/undecorated/core.js"></script>

<script src="script/undecorated/popupMenu.js"></script>

<script src="script/undecorated/dropdown.js"></script>
<script src="script/undecorated/selectGrid.js"></script>
<script src="script/undecorated/numberInput.js"></script>
<script src="script/undecorated/repeatButton.js"></script>
<script src="script/undecorated/timePicker.js"></script>
<script src="script/undecorated/datetimePicker.js"></script>
<script src="script/undecorated/datetimeInput.js"></script>

<script src="script/host.js"></script>
<script>

    var hosted = 'getReminders' in window.external;

    var msgTimingValueRequired = 'Timing value cannot be left blank';
    var msgInvalidTimingValueFormat = 'Invalid timing value format';

    function test() {
        alert('test..');
        window.opener.reminderCallback();
    }
    $(function () {
        $('#btnAddReminder').on('click', function (e) {
            e.preventDefault();
            addReminder();
        });
        var $tbdReminders = $('#tbdReminders');
        $tbdReminders.on('click', '.btnRemove', function (e) {
            var $tr = $(this).parents('tr:first');
            $tr.remove();
            e.preventDefault();
            if (!$tbdReminders.children('tr:first').length) {
                $('#tbdEmptyIndicator').show();
            }
        });

        //
        var opener = window.dialogArguments || window.opener;
//            alert(opener.xxx);
//            var reminders = window.reminders || opener.currentReminders;
        var remindersJson = hosted ? window.external.getReminders() : opener.currentReminders;
        var reminders = JSON.parse(remindersJson || '[]');

        for (var n = 0; n < reminders.length; n++) {
            var reminder = reminders[n];
            var $row = addReminder(reminder);
        }
//            alert(window.opener.testValue);

        //
        $('#btnCancel').on('click', function () {
            if (hosted) {
                window.external.close();
            }
            else {
                window.close();
            }
        });

        $('#btnOk').on('click', function () {
            var reminders = [];
            var $trs = $('#tbdReminders').children('tr');
            for (var n = 0; n < $trs.length; n++) {
                var $tr = $($trs[n]);
                var $input = $tr.find('input[name="txtTiming"]');
                var reminder = {
                    Type: $tr.find('select[name="cbType"]').val(),
                    Timing: {
                        Type: $tr.find('select[name="cbTimingType"]').val(),
                        Value: jsex.trim($input.val())
                    }
                };
                var err = validate(reminder);
                if(err) {
                    alert(err);
                    $input.focus();
                    return;
                }
                reminders.push(reminder);
            }
            var remindersJson = reminders.length ? JSON.stringify(reminders) : '';
            if (hosted) {
                window.external.setReminders(remindersJson);
                window.external.close();
            }
            else {
                opener.setupReminderCallback(remindersJson);
                window.close();
            }
        });

    });

    function validate(reminder) {
        var timing = reminder.Timing;
        if(!timing.Value) {
            return msgTimingValueRequired;
        }
        if(timing.Type == '1') {
            var re = /^(\d+M)?(\d+w)?(\d+d)?(\d+h)?(\d+m)?(\d+s)?(@([01]\d|2[0-3])(:([0-5]?\d)){0,2})?$/;
            if(!re.test(timing.Value)) {
                return msgInvalidTimingValueFormat;
            }
        }
        if(timing.Type == '2') {
            var re = /^(\d+M)?(\d+w)?(\d+d)?(\d+h)?(\d+m)?(\d+s)?$/;
            if(!re.test(timing.Value)) {
                return msgInvalidTimingValueFormat;
            }
        }
        return null;
    }

    function addReminder(reminder) {
        var $row = $('#tbdTemplate').children().clone();
        $row.appendTo($('#tbdReminders'));
        $('#tbdEmptyIndicator').hide();
        if (reminder) {
            $row.find('select[name="cbType"]').val(reminder.Type);
            $row.find('select[name="cbTimingType"]').val(reminder.Timing.Type);
            $row.find('input[name="txtTiming"]').val(reminder.Timing.Value);
        }
        $row.find('select[name="cbTimingType"]').trigger('change');
        return $row;
    }

    function onCbTimingTypeChange(cb) {
        var $cb = $(cb);
        var $input = $cb.parents('tr:first').find('input[name="txtTiming"]');
        if ($cb.val() == '0') {
            $input.datetimeInput({
                picker: $('#divDatetimePicker'),
                precision: 'minute'
            });
        }
        else {
            $input.datetimeInput('unload');
        }
    }

</script>
</head>
<body>
<!--<p>-->
<!--<input type="button" value="test" onclick="test();"/>-->
<!--</p>-->
<table id="tblReminders">
    <thead>
    <tr>
        <th style="width:122px;">Remind Type</th>
        <th style="width:98px;">Timing Type</th>
        <th style="">Timing</th>
        <th style="width:12px;"></th>
    </tr>
    </thead>
    <tbody id="tbdReminders">
    </tbody>
    <tbody id="tbdEmptyIndicator">
    <tr>
        <td colspan="4">
            No Reminder
        </td>
    </tr>
    </tbody>
    <tbody id="tbdTemplate" class="hidden">
    <tr>
        <td>
            <select name="cbType">
                <option value="0">Popup</option>
                <option value="1">Email</option>
            </select>
        </td>
        <td>
            <select name="cbTimingType" onchange="onCbTimingTypeChange(this);">
                <option value="0">At</option>
                <option value="1">Every</option>
                <option value="2">Before</option>
            </select>
        </td>
        <td>
            <input type="text" name="txtTiming"/>
        </td>
        <td>
            <a href="#" class="btnRemove"></a>
        </td>
    </tr>
    </tbody>
    <tfoot id="tftOperation" class="hidden">
    <tr>
        <td colspan="4">
            <!--<a href="#" id="btnAddReminder">Add Reminder</a>-->
        </td>
    </tr>
    </tfoot>
</table>
<div id="buttonPanel">
    <a href="#" id="btnAddReminder" style="float:left;margin-left: 3px;">Add Reminder</a>
    <input type="button" value="OK" id="btnOk"/>
    <input type="button" value="Cancel" id="btnCancel"/>
</div>
<!--<p>-->
<!--<input type="button" value="test" onclick="test();"/>-->
<!--</p>-->
<!-- datetimePicker -->
<div id="divDatetimePicker" class="datetimePicker hidden">
    <div>
        <a href="#" class="pager prevYear">&lt;&lt;</a>
        <a href="#" class="pager prevMonth">&lt;</a>
        <input type="text" class="txtMonth"/><input
            type="text" class="txtYear"/>
        <a href="#" class="pager nextMonth">&gt;</a>
        <a href="#" class="pager nextYear">&gt;&gt;</a>
    </div>
    <table class="calendar">
        <thead>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
        </thead>
        <tbody class="days">
        </tbody>
    </table>
    <div class="timePickerContainer">
        <span class="timeLabel">Time</span>

        <div class="timePicker"></div>
    </div>
    <div class="buttons">
        <input type="button" class="btnOk" value="OK">
        <input type="button" class="btnToday" value="Today">
        <input type="button" class="btnClear" value="Clear">
    </div>
</div>
<!--menu-->
<ul id="ulMenu1" class="hidden">
    <li>
        hello
    </li>
    <li>
        world
    </li>
</ul>
<script>
    var map = host.getLocalizedStrings();
    if (map) {
        var $ths = $('#tblReminders').children('thead').find('th');
        $($ths[0]).text(map['col.reminderType']);
        $($ths[1]).text(map['col.timingType']);
        $($ths[2]).text(map['col.timingValue']);
        $('#btnOk').val(map['action.ok']);
        $('#btnCancel').val(map['action.cancel']);
        $('#btnAddReminder').text(map['action.addReminder']);

        var $typeOptions = $('select[name=cbType] option');
        $($typeOptions[0]).text(map['opt.remindType.popup']);
        $($typeOptions[1]).text(map['opt.remindType.email']);

        var $timingTypeOptions = $('select[name=cbTimingType] option');
        $($timingTypeOptions[0]).text(map['opt.timingType.at']);
        $($timingTypeOptions[1]).text(map['opt.timingType.every']);
        $($timingTypeOptions[2]).text(map['opt.timingType.before']);

        $('#tbdEmptyIndicator').find('td').text(map['msg.noReminder']);

        $('input.btnOk').val(map['action.ok']);
        $('input.btnToday').val(map['action.today']);
        $('input.btnClear').val(map['action.clear']);

        $.fn.datetimePicker.setMonthAbbrs(map['monthAbbrs'].split(','));

        var $weekDayThs = $('table.calendar th');
        var weekDayAbbrs = map['weekDayAbbrs'].split(',');
        for (var n = 0; n < $weekDayThs.length; n++) {
            $($weekDayThs[n]).text(weekDayAbbrs[n]).addClass('zh');
        }

        msgTimingValueRequired = map['msg.timingValueRequired'];
        msgInvalidTimingValueFormat = map['msg.invalidTimingValueFormat'];
    }
</script>
</body>
</html>